<template>
	<div class="pt-8">
		<base-tip textT="reset.emailTitle"></base-tip>
		<base-input
			class="mt-[10px]"
			v-model="email"
			labelT="account.email"
			:error="emailError"></base-input>
		<base-button
			class="mt-[30px]"
			type="primary"
			:disabled="submitDisabled"
			:loading="loading"
			@click="onSubmit">
			{{ $t('reset.title') }}
		</base-button>
	</div>
</template>
<script lang="ts" setup>
import { BaseTip, BaseInput, BaseButton } from '@/components/base'
import { ref, computed, inject, Ref } from 'vue'
import { AccountType } from '@/enums'
import { isEmail, t } from '@/utils'
import { sendCode } from '@/api/assistants'
import { useRequest } from '@/hooks'
import { CodeParams } from '@/types'

const params = inject<Ref<CodeParams>>('params')

const emits = defineEmits(['next'])

const tab = ref(AccountType.email)

const email = ref('')

const emailError = computed(() =>
	email.value && !isEmail(email.value) ? t('reset.emailError') : ''
)

const nameData = computed(() => email.value)

const { loading, run } = useRequest(sendCode, {
	showError: true,
	onSuccess: () => emits('next', { nameData: nameData.value, type: tab.value })
})

const submitDisabled = computed(() => !email.value || !isEmail(email.value))

const onSubmit = () => {
	run({ ...params?.value, nameData: nameData.value, type: tab.value })
}
</script>

<style scoped lang="scss">
.n-tabs {
	:deep(.n-tabs-pane-wrapper) {
		overflow: visible !important;
	}
}
</style>
